<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<script src="./vue.js"></script>
<body>
    <div id="app">
         <myheader :a="num" title="嘿嘿"></myheader>
         <button @click="num++">+</button>
         <hr>
         <yourheader :a1="num1" title1="呵呵"></yourheader>
         <button @click="num1--">-</button>
    </div>
</body>
<script>
    const {createApp,ref,computed} = Vue;
    const app = createApp({
        setup(){
            let num = ref(0)
            let num1 = ref(10)
            return{
                num,
                num1
            }
        }
    })
    app.component('myheader',{
        props:{
            a:{
                type:[String,Number],
                required:true,
                validator(val){
                    if(val <=10){
                        return  true
                    }
                    throw new Error('不嘿嘿')
                    return false
            }
           
        },
        title:String
    },
        setup(props){
             let title = props.title;
             let a = computed(function(){
                return props.a
             })
                return{
                    title,
                    a 
                }   
        },
            template:`<div class="header">
                {{a}}
                {{title}}</div>`
    })

    app.component('yourheader',{
        props:['a1','title1'],
        setup(props){
             let title1 = props.title1;

             let a1 = computed(function(){
                return props.a1
             })
                return{
                    title1,
                    a1
                }   
        },
            template:`<div class="header">
                {{a1}}
                {{title1}}</div>`
    })

    app.mount('#app')
</script>
</html>